<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>KISSY gallery - RandomBox</title>
<link rel="shortcut icon" href="../../../../kissy-dpl/base/assets/favicon.ico"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/reset.css"/>
<link rel="stylesheet" href="../../../../kissy-dpl/base/assets/kissy-docs.css"/>
<script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
<script src="../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
<script>
    KISSY.config({
        packages:[
            {
                name:"gallery",
                tag:"20111220",
                path:"../../../",  // cdn上适当修改对应路径
                charset:"utf-8"
            }
        ]
    });
</script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a alt="KISSY" href="http://kissyui.com/"><img src="../../../../kissy-dpl/base/assets/logo.png"/></a></h1>
    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../index.html">Gallery</a>
        <span>RandomBox</span>
    </div>
	<pre class="s-section">				
		作者：382850581@qq.com 胡潇琪
		功能：随机盒子组件,支持随机数据后端配置
		描述：可用作摇奖转盘
		源码：<a href="randombox.js">randombox.js</a></pre>

    <h3 class="s-title">Demo - 转盘</h3>
    <div class="s-section">
        <div class="s-demo">
           <a href="default.html"> Default </a><br/>
           <a href="multiple.html"> Multiple </a> 
        </div>
        <a class="s-view-code" href="demo.html#">显示源码</a><!--点击该链接自动帮你显示s=demo里的内容，如不需要，去除链接即可-->
    </div>

    <h3 class="s-title">API</h3>
    <div class="s-section">
        <h4 class="s-api-title">方法</h4>
        <div class="s-api-method">
            KISSY.use('gallery/randombox/1.0/randombox, gallery/randombox/1.0/assets/default.css', function(S, RandomBox){
               box = new RandomBox({
				//配置id数组   "#"号勿忘
				list:["#b1","#b2","#b3","#b4","#b5",	
				      "#b10","#b15","#b20","#b25","#b24",
				      "#b23","#b22","#b21","#b16","#b11",
				      "#b6","#b7","#b8","#b9","#b14",
				      "#b19","#b18","#b17","#b12","#b13"],
				//配置旋转圈数
				rollTimes:2,
				//配置CSS类名  （选中时效果）
				cls:"sel-item",	
				//配置动画周期 (ms)
				duration:40
				//配置最终选中的id "#"号勿忘 不填为随机 
				//finalId:"#b6"		
				},function(targetId){
				//执行选中后的回调函数
				setTimeout(function(){alert("你选中了"+$(targetId).html());},400);
		   });
        </div>
        <h4 class="s-api-title">参数</h4>
        <div class="s-api-params">
        	<ul class="s-list">
            <li>{Object} [ <em>cfg</em> ] 配置参数</li>
        	</ul>
        	
        	<div>
        	cfg: {
	            <ul class="s-list">
	            	<li>{Array} [ <em>list</em> = ["#b1","#b2","#b3","#b4"] ] 选择某个单元格 </li>
	                <li>{Number} [ <em>rollTimes</em> = 2 ] 控制旋转圈数 </li>
	                <li>{String} [ <em>cls</em> = "sel-item" ] 旋转结束后选中的元素样式，可自定义 </li>
	                <li>{String} [ <em>finalId</em> = "#b2" ] 设置结束时的单元格，不填既为随机  </li>
	            </ul>
	         }
            </div>
            	<ul class="s-list">
	            	<li>{callback} [ <em>targetId</em> ] 结束时返回选中节点的id </li>
	            </ul>
        </div>
        <h4 class="s-api-title">返回</h4>
        <div class="s-api-return">null</div>
    </div>

    <h3 class="s-title">Note</h3>
    <div class="s-section">
        <ul class="s-list">
            <li>your note</li>
        </ul>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>